<template>
  <!-- 配送中 -->
  <scroll-view
    class="order-detail unRunning"
    :scroll-y="true"
    :scroll-top="scrollTop"
  >
    <image
      :src="getImgSrc('/address/map_back.png')"
      class="back"
      @tap="back()"
    />
    <view id="map" />
    <view class="order-info">
      <view class="block">
        <!-- <view class="block-title"
          >您的商品正在配送中，预计<text>{{ orderInfo.arriveTime }}</text>
          送达</view
        > -->
				<!-- <view class="block-title" style="white-space: nowrap;"
				  >您的任务正在进行中，将在<text>{{ orderInfo.arriveTime }}</text>
				  前完成</view
				> -->
				<view class="block-title" style="white-space: nowrap;"
				  >赏金猎人正在努力完成中，请耐心等待
				</view
				>
        <!-- <view class="block-desc"
          >您本次的收货码为<text>{{ orderInfo.code }}</text
          >请核对货品无误后告知跑腿员。
          <view
            >本次跑腿服务预计里程 {{ orderInfo.km || "-" }} 公里，预计用时 {{ orderInfo.min || "-" }} 分钟。</view
          ></view
        > -->
				<view class="block-desc"
				  >本次任务验证码为<text>{{ orderInfo.code }}</text
				  >请验收任务后告知赏金猎人。
				  <view>
				    <!-- 本次任务总历时 {{ orderInfo.min || "-" }} 分钟。</view -->
				    本次任务已历时 {{ DateDiff(orderInfo.createTime, new Date()) || "-" }} 分钟。</view
				  ></view
				><!-- 本次跑腿服务预计里程 {{ orderInfo.km || "-" }} 公里， -->
        <view>
          <view
            class="block-btn"
            @tap="
              triggerToCall(
                orderInfo.runner.mobile,
                '跑腿员电话号码为空，呼叫失败，如有疑问请拨打客服'
              )
            "
          >
            <image
              :src="getImgSrc('/cuser/icon_consult@2x.png')"
              mode="aspectFit"
            />联系赏金猎人
          </view>
          <view class="block-btn" @tap="triggerToCall(phone)">
            <image
              :src="getImgSrc('/cuser/icon_service@2x.png')"
              mode="aspectFit"
            />联系客服
          </view>
        </view>
      </view>
      <view class="divider" />
      <view class="people">
        <view class="people-avatar">
          <image :src="orderInfo.runner.head || getImgSrc('/cuser/head.png')" />
        </view>
        <view class="people-info">
          <view
            >认证赏金猎人 {{ orderInfo.runner ? orderInfo.runner.name || "-" : "-" }}</view
          >
          <view
            >共完成 {{ " " + orderInfo.runner ? orderInfo.runner.totalOrderCount : "-" }}
            次赏金任务，评分<text>{{
              orderInfo.runner ? orderInfo.runner.score : "5.0"
            }}</text></view
          >
        </view>
      </view>
      <view class="divider" />
      <view class="list pd-50">
        <view class="list-info">
          <view class="list-info-label">任务号:</view>
          <view class="list-info-value"
            >{{ orderInfo.tradeNo }}
            <image
              class="list-icon-copy"
              @tap="clip"
              :src="getImgSrc('/cuser/icon_copy@2x.png')"
            />
          </view>
        </view>
        <!-- <view class="list-info">
          <view class="list-info-label">预计完成:</view>
          <view class="list-info-value">{{ orderInfo.requestedTime }}</view>
        </view> -->
        <view class="list-info">
          <view class="list-info-label">支付方式:</view>
          <view class="list-info-value">{{ orderInfo.payTypeName }}</view>
        </view>
        <view class="list-info">
          <view class="list-info-label">发布时间:</view>
          <view class="list-info-value">{{ orderInfo.createTime }}</view>
        </view>
      </view>
      <view class="divider" />
      <view class="detail pd-50">
        <view class="detail-address">
          <view class="detail-take">
            <text class="detail-icon">始</text>
            <text>{{ takeAddress }}</text>
          </view>
          <view class="detail-receive">
            <text class="detail-icon">终</text>
            <text>{{ receiveAddress }}</text>
          </view>
        </view>
        <view class="detail-info">
          <view class="detail-category">
            <view
              >任务类型：{{ (orderInfo.goodsTypeList || []).join("、") }}</view
            >
            <view>难度系数/kg：{{ orderInfo.weight || 0 }}kg</view>
            <view>备注：{{ orderInfo.remark }}</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script>
import OrderMixin from "./mixin";
import { call } from "@/common/location.js";

export default {
  mixins: [OrderMixin],
  data() {
    return {};
  },
  mounted(option) {
    this.initMap(this.latitude).then(() => this.updateMarker(true));
  },
  onShow() {},
  watch: {
    orderInfo(newV, oldV) {
      const { lat, lon } = newV.runner;
      const { lat:_lat, lon:_lon } = oldV.runner;
      if (lat !== _lat || lon !== _lon) {
        this.updateMarker();
      }
    },
  },
  methods: {
    triggerToCall(phone, message) {
      if (!phone) {
        uni.showToast({
          title: message || "未设置电话号码, 呼叫失败",
          icon: "none",
        });
        return;
      }
      call(phone);
    },
		DateDiff(timeStart, timeEnd) {
			if(timeEnd) {
				let start = new Date(timeStart.replace(/-/g,'/'))
				console.log(typeof timeEnd)
				let end
				if(typeof timeEnd == "string") {
					end = new Date(timeEnd.replace(/-/g,'/'))
				}else {
					end = new Date(timeEnd)
				}
				return Math.ceil((Math.abs(end - start) / 1000 / 60))
			}else {
				return '-'
			}
			
		}
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";

.unRunning {
  height: 100vh;

  .order-info {
    position: relative;
    background: #ffffff;
    margin-top: -45rpx;
    z-index: 9999;
    box-shadow: 0 -20rpx 42rpx 8rpx rgba(112, 112, 112, 0.1);
    border-radius: 42rpx 42rpx 0 0;
    padding: 57rpx 0 50rpx;
  }

  .divider {
    width: 100%;
    height: 1rpx;
    margin: 0 auto;
    width: 650rpx;
    background: #eaeaea;
  }

  .people {
    padding: 50rpx 50rpx 50rpx 41rpx;
    display: flex;

    &-avatar {
      flex-basis: 90rpx;
      width: 90rpx;
      height: 90rpx;
      border-radius: 45rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    &-info {
      padding-left: 11rpx;

      & > view:first-child {
        margin-top: 10rpx;
        margin-bottom: 18rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #282828;
        line-height: 30rpx;
      }

      & > view:last-child {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #696969;
        line-height: 26rpx;

        text {
          padding: 0 5rpx;
          color: #fc801c;
        }
      }
    }
  }

  .block {
    padding: 0 50rpx;

    &-title {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #282828;
      line-height: 36rpx;
      word-break: break-all;

      text {
        color: #4e95fc;
        font-size: 36rpx;
        padding: 0 10rpx;
      }
    }

    &-desc {
      margin: 30rpx auto 37rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #696969;
      line-height: 46rpx;
      word-break: break-all;
      text {
        color: #fd9c5f;
        font-size: 30rpx;
        padding: 0 10rpx;
      }
    }

    &-btn {
      margin-bottom: 50rpx;
      width: 220rpx;
      height: 64rpx;
      background: #ffffff;
      border: 1rpx solid #cccccc;
      border-radius: 32rpx;
      text-align: center;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #4b4b4b;
      line-height: 36rpx;
      margin-right: 30rpx;

      image {
        width: 34rpx;
        height: 34rpx;
        margin-right: 8rpx;
      }
    }
  }

  .pd-50 {
    padding: 50rpx;
  }
}
</style>
